import {Element, Editor, Frame, useEditor} from '@craftjs/core';
import {Stage} from './components/stage';
// import {Form} from '@/pages/Home/components/template/form'
import {useLoadComponents} from "./utils/loadComponents";
import {RexProForm} from '@jeoshi-pro/pro-rex.data-entry.rex-pro-form'
import { Col, Row } from 'antd';
import { SettingPanel } from '@/components/SettingPanel';
import { ChatModal } from './components/chat-modal';

const Chat = () => {
    const editData = useEditor();
    const {componentsMap} = useLoadComponents();
    const {actions, query} = editData;

    return <ChatModal callback={(values) => {
        // clearCanvas();
        values.actions.forEach((item: {type: string, eventReference: object}) => {
            const Com = componentsMap[item.type];
            const proFormNode = <Com {...item.eventReference} />

            const nodeTree = query
                .parseReactElement(proFormNode)
                .toNodeTree();

            actions.addNodeTree(nodeTree, 'ROOT');
        });
    }} />
}

const HomePage: React.FC = () => {

    const {loading, componentsMap} = useLoadComponents([
        {umdUrl: './card.umd.js', componentName: 'Card'},
        {rawComponent: RexProForm, componentName: 'RexProForm'},
    ]);

    if (loading) return <></>;

    return (
        <Editor resolver={{...componentsMap, Stage}}>
            <Row>
                <Col span={15}>
                    <Frame>
                        <Element is={Stage} canvas />
                    </Frame>
                </Col>
                <Col flex={'300px'}>
                    <SettingPanel />
                </Col>
            </Row>
            <Chat />
        </Editor>
    );
};

export default HomePage;
